<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"  th:headers="utf-8">
<meta charset="UTF-8" />
<head>
    <title>带有省略号的分页</title>
    <script th:src="@{/js/jquery.min2.js}"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
</head>
<body th:fragment="foot">
<ul id="pageInfo" class="pagination">
<!--    <li><a href="#">1</a></li>-->
<!--    <li><a href="#">2</a></li>-->
<!--    <li><a href="#">3</a></li>-->
<!--    <li><a href="#">4</a></li>-->
<!--    <li><a href="#">5</a></li>-->
<!--    <li><a href="#">&raquo;</a></li>-->
</ul>

<script type="text/javascript">
    $(function() {
        var pagingInfo = $("#pageInfo")

        var data=[[${pages}]];

        //表示前后都有省略号时中间页面刷新基准，为了防止点击中间时页面频繁刷新页面导致的视觉错位
        var tmpPageIndex = 0;

        //添加事件
        $(document).on("click", "#pageInfo li a",function () {
            // let page = $(this).attr("page")
            let page=[[${pa}]];
            if(page){
                page =parseInt(page)
                refreshPageInfo(data, page);
            }

        })

        // 刷新|生成分页信息|自定义属性page表示当前页面索引
        function refreshPageInfo(data, pageIndex) {
            var pageSize = data
            pagingInfo.html('')
            var li = $('<li><a page="1">&laquo;</a></li>')
            pagingInfo.append(li)

            // 总页数小于等于10页，全部显示
            if (pageSize <= 10) {
                for (var i = 1; i <= pageSize; i++) {

                    var li = $('<li><a onclick="getrepa(i)" '+'" page="' + i + '">' + i + '</a></li>')
                    addActive(li, i, pageIndex)
                    pagingInfo.append(li)
                }
                // 当前页是前10页
            } else if (pageIndex < 10) {
                for (var i = 1; i <= 10; i++) {
                    var li = $('<li><a onclick="getrepa(i)" '+'"  page="' + i + '">' + i + '</a></li>')
                    addActive(li, i, pageIndex)
                    pagingInfo.append(li)
                }
                pagingInfo.append('<li><a>......</a></li>')
                pagingInfo.append('<li><a onclick="getrepa(i)" '+'"  page=' + pageSize + '>' + pageSize + '</a></li>')
                // 当前页面是最后10页
            } else if (pageSize - pageIndex < 10) {
                if (pageSize - 10 > 1) {
                    pagingInfo.append('<li><a page="1">1</a></li>')
                    pagingInfo.append('<li><a>......</a></li>')
                }
                for (var i = pageSize - 10; i <= pageSize; i++) {
                    var li =  $('<li><a onclick="getrepa(i)" '+'" page="' + i + '">' + i + '</a></li>')
                    addActive(li, i, pageIndex)
                    pagingInfo.append(li)
                    if (i == 1) {
                        pagingInfo.append('<li><a>......</a></li>')
                    }
                }
            } else {
                // 当前页面基于所有页面中间位置
                // 初始化页面基准坐标
                if (tmpPageIndex == 0) {
                    tmpPageIndex = pageIndex
                }
                // 当页面索引达到最前或最后时，需要重新设置页面基准坐标
                if (tmpPageIndex <= pageIndex - 5 || tmpPageIndex >= pageIndex + 5) {
                    tmpPageIndex = pageIndex
                }
                pagingInfo.append('<li><a page="1">1</a></li>')
                pagingInfo.append('<li><a>......</a></li>')
                for (var i = tmpPageIndex - 5; i <= tmpPageIndex + 5; i++) {
                    var li =  $('<li><a onclick="getrepa(i)" '+'"  page="' + i + '">' + i + '</a></li>')
                    addActive(li, i, pageIndex)
                    pagingInfo.append(li)
                }
                pagingInfo.append('<li><a>......</a></li>')
                pagingInfo.append('<li><a page=' + pageSize + '>' + pageSize + '</a></li>')
            }

            var li = $('<li><a page="' + data + '">&raquo;</a></li>')
            pagingInfo.append(li)
        }

        // 添加分页按钮焦点
        function addActive(li, i, pageIndex) {
            if (i == pageIndex) {
                li.addClass('active')
            }
        }

        refreshPageInfo(data,1)

    })
</script>
<script >
    function getrepa(pag){
        var  url='/doma?page='+pag;
        $('info').load(url);
    }
</script>
</body>
</html>